<template>
  <div class="data-table">
    <div class="meta">
      <meta-table :data="tableData" :colConfig="tableConfig" isIndex="true" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import MetaTable from "@/views/components/MetaTable.vue";

// 表格数据
const tableData = ref([
  {
    name: "款式组合",
    fieldName: "kuanshi",
    type: "string",
    length: 80,
    decimalPlaces: 0,
  },
  {
    name: "门店",
    fieldName: "mendian",
    type: "string",
    length: 60,
    decimalPlaces: 0,
  },
  {
    name: "年",
    fieldName: "year",
    type: "date",
    length: 60,
    decimalPlaces: 0,
  },
  {
    name: "销售数量(件)",
    fieldName: "saleAmount",
    type: "int",
    length: 18,
    decimalPlaces: 0,
  },

  {
    name: "零售单价(元)",
    fieldName: "retailPrice",
    type: "float",
    length: 18,
    decimalPlaces: 2,
  },
  {
    name: "折扣率",
    fieldName: "discountRate",
    type: "float",
    length: 38,
    decimalPlaces: 2,
  },
  {
    name: "折后单价(元)",
    fieldName: "discountedPrice",
    type: "float",
    length: 18,
    decimalPlaces: 2,
  },
  {
    name: "折后总价",
    fieldName: "discountedTotalPrice",
    type: "float",
    length: 38,
    decimalPlaces: 2,
  },
  {
    name: "零售总额",
    fieldName: "retailTotalPrice",
    type: "float",
    length: 38,
    decimalPlaces: 2,
  },
]);
// 表格配置
const tableConfig = ref([
  {
    label: "名称",
    prop: "name",
    minWidth: "80",
  },
  {
    label: "字段名",
    prop: "fieldName",
    minWidth: "180",
  },
  {
    label: "类型",
    prop: "type",
    minWidth: "180",
  },
  {
    label: "长度",
    prop: "length",
    minWidth: "180",
  },
  {
    label: "小数位数",
    prop: "decimalPlaces",
    minWidth: "180",
  },
]);
</script>

<style lang="scss" scoped>
.data-table {
  width: 100%;
  overflow-y: hidden;
  height: 100%;

  .meta {
    height: 100%;
  }
}
</style>
